<template>
  <el-container class="container" v-loading="loading">
    <el-header class="header">
      <span @click="toDisplay" class="title">博客首页</span>
      <el-dropdown @command="handleCommand" class="dropdown">
  <span class="el-dropdown-link dropdown-link">
    {{JSON.parse(this.$store.state.user).nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="toShouYe">去首页</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="250px" class="aside">
        <el-row class="tac">
          <el-col>
            <el-menu
                router
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#53567a"
                text-color="#fff"
                active-text-color="#ffd04b">
              <el-submenu :index="'1'" :key="1">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span>文章管理</span>
                </template>
                <el-menu-item :index="'/writeArticle'" :key="'writeArticle'">写文章</el-menu-item>
                <el-menu-item :index="'/articleList'" :key="'articleList'">文章列表</el-menu-item>
                <el-menu-item :index="'/tagCategoryAdmin'" :key="'tagCategoryAdmin'">标签分类管理</el-menu-item>
              </el-submenu>
              <el-submenu :index="'2'" :key="2" v-if="JSON.parse(this.$store.state.user).username ==='admin'">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item :index="'/userInfo'">用户信息</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="this.$route.name != 'Home'">{{this.$route.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import axios from "axios";

  export default {
    name: "Home",
    mounted() {
       console.log(JSON.parse(this.$store.state.user).username+"");
    },
    methods: {
      goToHomePage(){
        this.$router.push({path: '/'});
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleCommand(command) {
        if (command == 'logout') {
          this.loading = true;
          const token = JSON.parse(this.$store.state.user).token;
          axios.get('/user/logout/' + token).then(value => {
            this.loading = false;
            const data = value.data
            if (data.success) {
              this.$store.commit('logout');
              this.$router.push({path: '/'});
            } else {
              this.$message.error({message: '登出失败'});
            }
          })
        }else{
          this.$router.push({path: '/'});
        }
      },
      toDisplay() {
        this.$router.push({path: '/'})
      }
    },
    data() {
      return {
        loading: false,
      }
    }
  }
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .header {
    background-color: #43ae9e;
  }

  .aside {
    background-color: #53567a;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .title {
    float: left;
    margin-left: 10px;
    line-height: 60px;
    font-size: large;
    cursor: pointer;
  }

  .dropdown {
    float: right;
    line-height: 60px;
  }

  .dropdown-link {
    color: #ff9799;
  }
</style>
